<!DOCTYPE html>
<html>
    <head>
        <title>Register</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="js/global.js"></script>
        <link type="text/css" href="css/global.css" rel="stylesheet" />
        <style type="text/css">
            body {
                padding: 50px 110px 50px 50px;
                min-width: 0;
                background: #FFF;
            }
            label {
                display: block;
            }
            input, select {
                width: 80%;
                margin-left: 10%;
            }
            label.must:after {
                content: ' *';
                color: #E13B1A;
            }
            input.btn {
                position: fixed;
                width: auto;
                right: 30px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <form id="registerForm" method="POST" action="Register">
            <h3>Account Information</h3>
            <label for="userid">Username</label>
            <input type="text" id="userid" name="user_id" placeholder="Username" /><br />
            <label for="password1">Password</label>
            <input type="password" id="password1" name="user_pwd1" placeholder="Password" /><br />
            <label for="password2">Repeat Password</label>
            <input type="password" id="password2" name="user_pwd2" placeholder="Confirm Password" /><br />
            <label for="email">Email Address</label>
            <input type="text" id="email" name="email" placeholder="Email Address" /><br />
            <h3>Personal Information</h3>
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" name="firstname" placeholder="First Name" /><br />
            <label for="midname">Middle Name</label>
            <input type="text" id="midname" name="midname" placeholder="Middle Name" /><br />
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Last Name" /><br />
            <label for="gender">Gender</label>
            <select id="gender" name="gender">
                <option value="M">Male</option>
                <option value="F">Female</option>
            </select>
            <label for="nickname">Nick Name</label>
            <input type="text" id="nickname" name="nickname" placeholder="Nick Name " /><br />
            <label for="hometel">Home Tel. No.</label>
            <input type="text" id="hometel" name="hometel" placeholder="Home Tel. No. " /><br />
            <label for="celltel">Mobile Tel. No.</label>
            <input type="text" id="celltel" name="celltel" placeholder="Mobile Tel. No." /><br />
            <label for="DOB">Date of Birth</label>
            <input type="text" id="DOB" name="DOB" placeholder="dd-mm-yyyy"/><br />
            <h3>Address</h3>
            <label for="flat">Flat</label>
            <input type="text" id="flat" name="flat" placeholder="Flat" /><br />
            <label for="building_block">Building and Block</label>
            <input type="text" id="building_block" name="building_block" placeholder="Building and Block" /><br />
            <label for="district">District</label>
            <input type="text" id="district" name="district" placeholder="District" /><br />
            <label for="region">Region</label>
            <input type="text" id="region" name="region" placeholder="Region" /><br />
            <input type="submit" class="btn btn-highlight" value="Register"/>
        </form>
    </body>
</html>
